<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>复制小工具</title>
	<link rel="stylesheet" href="css/layui/css/layui.css">
	<link rel="stylesheet" href="css/style.css">
	<script src="css/layui/layui.js"></script>
	<script src="js/clipboard.js"></script>
	<script src="js/vue.js"></script>
</head>
<body>
	<div class="layui-main" id="box">
		<div class="effect layui-col-md12">
			<div class="tips">{{ effect }}</div>
		</div>
		<div class="layui-row con">
		    <div class="layui-col-md12">
				<ul class="ul" v-for="(item,i) in data">
					<div class="tit layui-elem-quote">
						{{ item.title }}
					</div>
					<li v-for="(item1,o) in item.data">
						<button :class="item1.class" :data-clipboard-text="item1.copied" @click="copy(i,o)">{{ item1.copied }}</button>
					</li>
				</ul>
		    </div>
		</div>
	</div>
	<script src="js/data.js"></script>
	<script>
		layui.define(['jquery', 'layer'], function(exports){
			var $ = layui.$,
			layer = layui.layer;
		});
		var clipboard = new ClipboardJS('.btn');
		var app3 = new Vue({
		    el: '#box',
		    data: function(){
		    	return {data:data,effect:"这里是需要复制的内容的做用说明，点击所要复制的内容即可查看"};
		    },
            methods: {
            	copy:function(i,o){
            		this.data[i]["data"][o]["class"] = this.data[i]["data"][o]["class"]=="btn layui-btn layui-btn-primary"?"btn layui-btn":"btn layui-btn layui-btn-primary";
            		this.effect = this.data[i]["data"][o]["effect"];
					clipboard.on('success', function(e) {
						layer.msg(e.text+"复制成功")
						e.clearSelection();
					});
            	},
			}
		})
	</script>
</body>
</html>